<script setup>
import db1 from "./db1.js";
import {ref} from "vue";

const dbList = ref([])
dbList.value = db1

const pagination = {
    onChange: page => {
        console.log(page);
    },
    onShowSizeChange: (current, pageSize) => {
        pagination.pageSize = pageSize
    },
    pageSize: 100,
};

const value = ref('');

const onSearch = (searchValue) => {
    dbList.value = db1.filter(item => {
        return item.name.includes(value.value)
    })
};
</script>

<template>
    <div>
        <a-input-search
                v-model:value="value"
                placeholder="请输入标题"
                enter-button
                @search="onSearch"
        />
        <a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="dbList">
            <!--            <template #footer>-->
            <!--                <div>-->
            <!--                    <b>ant design vue</b>-->
            <!--                    footer part-->
            <!--                </div>-->
            <!--            </template>-->
            <template #renderItem="{ item }">
                <a-list-item key="item.name">
                    <!--                    <template #actions>-->
                    <!--          <span v-for="{ icon, text } in actions" :key="icon">-->
                    <!--            <component :is="icon" style="margin-right: 8px"/>-->
                    <!--            {{ text }}-->
                    <!--          </span>-->
                    <!--                    </template>-->
                    <template #extra>
                        <img
                                width="272"
                                alt="logo"
                                :src="item.img"
                        />
                    </template>
                    <a-list-item-meta :description="item.description">
                        <template #title>
                            <a :href="`https://www.baidu.com/s?ie=utf-8&wd=${item.name}`" target="_blank">{{
                                item.name
                                }}
                                <img style="width: 60px;height: 22px"
                                     src="https://www.baidu.com/img/flexible/logo/pc/result@2.png">
                            </a>
                        </template>
                        <!--                        <template #avatar>-->
                        <!--                            <a-avatar :src="item.avatar"/>-->
                        <!--                        </template>-->
                    </a-list-item-meta>
                    <div v-if="item.baiduWangPanUrl">
                        <span v-if="item.baiduWangPanFailure" style="color: red">链接失效了</span>
                        <a :href="`${item.baiduWangPanUrl}?pwd=${item.baiduWangPanPassword}`"
                           target="_blank">百度网盘链接：{{ item.baiduWangPanUrl }}</a>
                    </div>
                    <div v-if="item.baiduWangPanUrl">
                        解压码：{{ item.decompressionCode }}
                    </div>
                    <div v-if="item.aLiWangPanUrl">
                        <a :href="`${item.aLiWangPanUrl}`" target="_blank">阿里网盘链接：{{ item.aLiWangPanUrl }}</a>
                    </div>
                    <div v-if="item.aLiWangPanUrl">
                        解压码：{{ item.decompressionCode }}
                    </div>
                </a-list-item>
            </template>
        </a-list>
    </div>
</template>

<style scoped>
</style>
